<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>公众号商家消息授权提醒</title>
    <link rel="stylesheet" href="./css/muse-ui.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/muse-ui.js"></script>
    <script src="./js/jsencrypt.min.js"></script>
    <style>
      .register {
        min-height: 100%;
        opacity: 0;
        margin-bottom: 20px;
      }
      .register .mu-form-item {
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="register pd-top-10">
        <div style="text-align: center; padding: 30px 0">
          <img src="./regis.png" style="width: 80px" />
        </div>
        <!--<app-header title="注册"></app-header>-->
        <mu-form ref="form" :model="validateForm" class="login-content">
          <p
            style="
              color: #343633;
              font-size: 14px;
              font-weight: bold;
              padding: 0 0 10px 10px;
            "
          >
            请填写商家账号进行消息绑定
          </p>
          <mu-form-item prop="username" :rules="usernameRules">
            <mu-text-field
              placeholder="请输入商家账号"
              type="tel"
              v-model="validateForm.username"
              prop="username"
            >
              <i
                @click="validateForm.username = ''"
                v-if="validateForm.username"
                class="iconfont fz-24"
                >&#xe642;</i
              >
            </mu-text-field>
          </mu-form-item>
          <mu-form-item style="margin-top: 20px">
            <mu-button class="submit-btn" @click="submit">确认</mu-button>
          </mu-form-item>
        </mu-form>
      </div>
    </div>
  </body>

  <script>
    //api地址
    let url = "https://agreedy.tcwang888.com/";
    let appid = "wx1ed5785a701ca2ab";
    let vueInstance = new Vue({
      el: "#app",
      data() {
        return {
          usernameRules: [
            {
              validate: (val) => !!val,
              message: "请输入手机号",
            },
            {
              validate: (val) => /^[1][1-9][0-9]{9}$/.test(val),
              message: "请输入正确的手机号",
            },
          ],
          smscodeRules: [
            {
              validate: (val) => !!val,
              message: "请输入验证码",
            },
          ],
          validateForm: {
            username: "",
            password: "",
            password2: "",
            assetsPassword: "",
            assetsPassword2: "",
            smscode: "",
            nickname: "",
            invitationCode: "",
          },
          visibility: false,
          visibility1: false,
          visibility2: false,
          visibility3: false,

          codeMsg: "获取验证码",
          canSend: false,
          timer: null,
          startTime: null,
          time: 60, //倒计时60秒

          pid: "",
        };
      },
      created() {
        setTimeout(() => {
          //隐藏vue加载过程显示的{{}}
          document.querySelector(".register").style.opacity = 1;
        }, 50);

        //刷新页面验证码倒计时继续
        if (localStorage.vvStratTime) {
          this.sended = true;
          this.startTime = localStorage.vvStratTime;
          this.sending();
        }
      },
      methods: {
        // 手机验证码
        getCode() {
          const formData = {
            mobile: this.validateForm.username,
          };
          if (!/^[1][3-9][0-9]{9}$/.test(this.validateForm.username)) {
            alert("请输入正确的手机号！");
            return;
          } else {
            //发送短信
            axios.post(url + "other/sendmns", formData).then((res) => {
              alert(res.data.msg);
            });
          }

          this.canSend = true;
          this.startTime = new Date().getTime();
          localStorage.setItem("vvStratTime", this.startTime);
          this.sending();
        },
        sending() {
          //验证码倒计时
          let app = this;
          let now = new Date().getTime();
          let time = Math.round((now - app.startTime) / 1000);
          app.codeMsg = `稍等${app.time - time}秒`;
          if (time >= app.time) {
            app.canSend = false;
            app.startTime = null;
            app.timer = null;
            app.codeMsg = `获取验证码`;
            localStorage.removeItem("vvStratTime");
          } else {
            app.timer = setTimeout(function () {
              app.sending();
            }, 1000);
          }
        },
        submit() {
          //注册
          this.$refs.form.validate().then((result) => {
            if (result) {
              document.location.href =
                "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
                appid +
                "&redirect_uri=" +
                url +
                "Other/getopenid?mobile=" +
                this.validateForm.username +
                "&response_type=code&scope=snsapi_userinfo&state=" +
                "#wechat_redirect";
            }
          });
        },
      },
    });
  </script>
  <script>
    //alert 弹出框样重写样式
    window.alert = function (msg, callback) {
      var div = document.createElement("div");
      div.innerHTML =
        '<style type="text/css">' +
        ".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       " +
        ".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            " +
        ".nbaDialog { position: fixed; z-index: 5000; width: 80%; max-width: 300px; top: 40%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }" +
        ".nbaDialog .nbaDialogHd { padding: .2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         " +
        ".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           " +
        ".nbaDialog .nbaDialogBd { padding: 20px .27rem;color: #F8436D; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; }                                                                                                                                          " +
        ".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          " +
        '.nbaDialog .nbaDialogFt:after { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               ' +
        ".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #009EE2; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       " +
        '.nbaDialog .nbaDialogBtn:after { content: " "; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             ' +
        "</style>" +
        '<div id="dialogs2" style="display: none">' +
        '<div class="nbaMask"></div>' +
        '<div class="nbaDialog">' +
        '	<div class="nbaDialogHd">' +
        '		<strong class="nbaDialogTitle"></strong>' +
        "	</div>" +
        '	<div class="nbaDialogBd" id="dialog_msg2">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>' +
        '	<div class="nbaDialogHd">' +
        '		<strong class="nbaDialogTitle"></strong>' +
        "	</div>" +
        '	<div class="nbaDialogFt" id="dialog_ok2">' +
        '		<p href="javascript:;" class="nbaDialogBtn nbaDialogBtnPrimary">确定</p>' +
        "	</div></div></div>";
      document.body.appendChild(div);

      var dialogs2 = document.getElementById("dialogs2");
      dialogs2.style.display = "block";

      var dialog_msg2 = document.getElementById("dialog_msg2");
      dialog_msg2.innerHTML = msg;

      var dialog_ok2 = document.getElementById("dialog_ok2");
      dialog_ok2.onclick = function () {
        dialogs2.style.display = "none";
      };
    };
  </script>
</html>
